<template>
  <!-- sku弹框组件 -->
  <vk-data-goods-sku-popup v-model="isShowSku"  :localdata="goodsInfo"
  :mode="skuMode"
  add-cart-background-color="#ffa868"
  buy-now-background-color="#27ba9b"
  :actived-style="{color:'#27ba9b',borderColor:'#27ba9b',backgroundColor:'#e9f8f5'}"
  ref="skuPopupRef"
  @add-cart="addCart">

  </vk-data-goods-sku-popup>
  <scroll-view class="viewport" scroll-y>
    <!-- 基本信息 -->
    <view class="goods">
      <!-- 商品主图 -->
      <view class="preview">
        <swiper
          @change="swiperChange($event)"
          class="swiper"
          circular
          indicator-dots
        >
          <swiper-item
            v-for="item in goodsDetail?.mainPictures"
            :key="item"
          >
            <image
              class="image"
              :src="item"
              mode="aspectFill"
              @tap="tapImage(item)"
            />
          </swiper-item>
        </swiper>

        <view class="indicator">
          <text class="current">{{
            activeIndex + 1
          }}</text>
          <text class="split">/</text>
          <text class="total">{{
            goodsDetail?.mainPictures.length
          }}</text>
        </view>
      </view>

      <!-- 商品简介 -->
      <view class="meta">
        <view class="price">
          <text class="symbol">¥</text>
          <text class="number">{{
            goodsDetail?.price
          }}</text>
        </view>
        <view class="name">{{
          goodsDetail?.name
        }}</view>
        <view class="desc">{{
          goodsDetail?.desc
        }}</view>
      </view>

      <!-- 操作面板 -->
      <view class="action">
        <view class="item" @tap="openSku(SkuModeEnum.both)">
          <text class="label">选择</text>
          <text class="text">{{selectArrText}}</text>
        </view>
        <view class="item" @tap="openPop('address')">
          <text class="label">送至</text>
          <text class="text">请选择收货地址</text>
        </view>
        <view class="item" @tap="openPop('service')">
          <text class="label">服务</text>
          <text class="text"
            >无忧退 快速退款 免费包邮</text
          >
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail panel">
      <view class="title">
        <text>商品详情</text>
      </view>
      <view class="content">
        <view class="properties">
          <!-- 属性详情 -->
          <view
            class="item"
            v-for="item in goodsDetail?.details
              .properties"
            :key="item.name"
          >
            <text class="label">{{
              item.name
            }}</text>
            <text class="value">{{
              item.value
            }}</text>
          </view>
        </view>

        <image
          class="image"
          :src="item"
          v-for="item in goodsDetail?.details
            .pictures"
          :key="item"
          mode="widthFix"
        >
        </image>
      </view>
    </view>

    <!-- 同类推荐 -->
    <view class="similar panel">
      <view class="title">
        <text>同类推荐</text>
      </view>
      <view class="content">
        <navigator
          class="goods"
          v-for="item in goodsDetail?.similarProducts"
          :key="item.id"
          url="`/pages/goods/index?id=${item.id}`"
          hover-class="none"
        >
          <image
            class="image"
            :src="item.picture"
            mode="aspectFill"
          />
          <view class="name ellipsis">{{
            item.name
          }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{
              item.price
            }}</text>
          </view>
        </navigator>
      </view>
    </view>
  </scroll-view>

  <!-- 用户操作按钮 :style="{paddingBottom: safeArea?.bottom + 'px'}"-->
  <view
    class="toolbar"
    :style="{
      paddingBottom: safeAreaInsets.bottom + 'px',
    }"
  >
    <view class="icons">
      <button class="icons-button">
        <text class="icon-heart"></text>
        收藏
      </button>
      <button
        class="icons-button"
        open-type="contact"
      >
        <text class="icon-handset"></text>
        客服
      </button>
      <navigator
        class="icons-button"
        url="/pages/"
        open-type="navigate"
        hover-class="navigator-hover"
      >
        <text class="icon-cart"></text>
        购物车
      </navigator>
    </view>

    <view class="buttons">
      <view class="addcart" @tap="openSku(SkuModeEnum.cart)">加入购物车</view>
      <view class="payment" @tap="openSku(SkuModeEnum.buy)">立即购买</view>
    </view>
  </view>

  <!-- 弹出层 -->
  <uni-popup
    ref="popupRef"
    type="bottom"
    background-color="#fff"
  >
    <AddressPanel v-if="popupName == 'address'"
    @close="closePopup"></AddressPanel>
    <ServicePanel v-if="popupName == 'service'"
    @close="closePopup"></ServicePanel>
  </uni-popup>
</template>

<script lang="ts" setup>
import { MOCK_IMAGE_URL } from '@/const/mock'
import { getGoodsDetailHttp } from '@/services/goodsService'
import type { GoodsResType } from '@/types/goods'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref} from 'vue'

import ServicePanel from './components/ServicePanel.vue'
import AddressPanel from './components/AddressPanel.vue'
import type { SkuPopupEvent, SkuPopupInstanceType, SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
import { addCartHttp } from '@/services/cartService'
// console.log('getSystemInfo',uni.getSystemInfo());
// console.log('getDeviceInfo',uni.getDeviceInfo());
// console.log('getWindowInfo',uni.getWindowInfo());
// console.log('getAppAuthorizeSetting',uni.getAppAuthorizeSetting());
// console.log('getSystemSetting',uni.getSystemSetting());
// // console.log('openAppAuthorizeSetting',uni.openAppAuthorizeSetting());

const { safeAreaInsets } = uni.getWindowInfo()
console.log(
  '安全区域边界safeAreaInsets:',
  safeAreaInsets
)
const props = defineProps<{
  id: string
}>()
console.log('路由参数id：', props.id)

const imageUrl = MOCK_IMAGE_URL

/**
 * 商品详情
 */
// 空对象一般不直接写了，直接ref()即可。
const goodsDetail = ref<GoodsResType>()
const getGoodsDetail = async () => {
  let res = await getGoodsDetailHttp(props.id)

  console.log('商品详情res：', res)

  goodsDetail.value = res.result

  // sku
  goodsInfo.value = {
    _id:res.result.id,
    name:res.result.name,
    goods_thumb:res.result.mainPictures[0],
    spec_list:res.result.specs.map(v=>{
      return {
        name:v.name, // 规格名称
        // 规格集合
        list:v.values
      }
    }),
    sku_list:res.result.skus.map(v=>{
      return {
        _id:v.id,
        goods_id:res.result.id,
        goods_name:res.result.name,
        image:v.picture,
        price: 100 * v.price,
        sku_name_arr:v.specs.map(val=>val.valueName),
        stock:v.inventory
      }
    })
  }
}
const activeIndex = ref(0)
const swiperChange = (ev: any) => {
  // console.log('ev:',ev);
  activeIndex.value = ev.detail.current
}

/***
 * 点击图片，预览
 */
const tapImage = (url: string) => {
  uni.previewImage({
    current: url,
    urls: goodsDetail.value!.mainPictures,
  })
}

/**
 * 弹出层
 */

const popupRef = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const popupName = ref<'service'|'address'>()
const openPop = (name:typeof popupName.value) => {
  popupRef.value?.open()
  // popupRef.value.close
  // 没有提示，可以指定一下ref的类型。
  // popupRef.value?.close 指定类型后，就有提示了。

  popupName.value = name
}
const closePopup = ()=>{
  popupRef.value?.close()
}

onLoad(() => {
  getGoodsDetail()
})
/**
 * sku模块内容
 */ 
enum SkuModeEnum {
  both = 1,
  cart=2,
  buy=3
}
const isShowSku = ref(false)
// const skuMode = ref(1) // 弹框模式：1显示所有；2显示购物车；3显示立即购买；
const skuMode = ref<SkuModeEnum>(SkuModeEnum.both) // 弹框模式：1显示所有；2显示购物车；3显示立即购买；
const goodsInfo = ref({} as SkuPopupLocaldata)

const openSku = (mode:SkuModeEnum=SkuModeEnum.both)=>{
  isShowSku.value = true
  skuMode.value = mode
  console.log(skuMode.value);
  
}
const skuPopupRef = ref<SkuPopupInstanceType>()
// 被选中的商品规格的处理
const selectArrText = computed(()=>{
  // skuPopupRef.value
  return skuPopupRef.value?.selectArr.join(' ').trim()|| '请选择商品规格~'
})
/**
 * 添加到购物车
 */ 
const addCart = async (e:SkuPopupEvent)=>{
  console.log('添加到购物车',e);
  
  let res = await addCartHttp({
    count:e.buy_num,
    skuId:e._id
  })
  uni.showToast({
    title:'添加成功'
  })
  isShowSku.value = false
}
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.viewport {
  background-color: #f4f4f4;
  height: 100%;
  padding-bottom: 150rpx;

  .panel {
    background-color: #fff;

    .title {
    }
  }

  .goods {
    background-color: #fff;

    .preview {
      height: 750rpx;
      position: relative;
      .image {
        width: 750rpx;
        height: 750rpx;
      }

      .indicator {
        position: absolute;
        bottom: 30rpx;
        right: 30rpx;

        border-radius: 30rpx;
        color: #fff;
        // font-family: Arial, Helvetica, sans-serif;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 0 24rpx;
        line-height: 40rpx;

        .current {
          font-size: 26rpx;
        }
        .split {
          font-size: 24rpx;
          margin: 0 1rpx 0 2rpx;
        }
        .total {
          font-size: 24rpx;
        }
      }
    }

    .meta {
      border-bottom: 1rpx solid #eaeaea;

      .price {
        padding: 25rpx 30rpx 0;
        background-color: #35c8a9;
        color: #fff;
        font-size: 34rpx;
        height: 130rpx;
        box-sizing: border-box;
        .symbol {
        }
        .number {
          font-size: 56rpx;
        }
      }

      .name {
        margin: 20rpx;
        font-size: 32rpx;
        color: #333;
      }
      .desc {
        padding: 0 20rpx 30rpx;
        font-size: 24rpx;
        color: #cf4444;
      }
    }

    .action {
      padding-left: 20rpx;

      .item {
        height: 90rpx;
        padding-right: 60rpx;
        border-bottom: 1rpx solid #eaeaea;
        font-size: 26rpx;
        color: #333;
        position: relative;
        display: flex;
        align-items: center;

        &:last-child {
          border: none;
        }
        .label {
          width: 60rpx;
          color: #898b94;
          margin: 0 16rpx 0 10rpx;
        }
        .text {
          flex: 1;
        }
      }
    }
  }

  // 商品详情
  .detail {
    margin-top: 20rpx;
    padding-left: 20rpx;
    .title {
      padding: 30rpx 60rpx 30rpx 6rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      line-height: 1;
      text {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        border-left: 4rpx solid #27ba9b;
        padding-left: 10rpx;
      }
    }

    .content {
      margin-left: -20rpx;

      .properties {
        padding: 0 20rpx;
        margin-bottom: 30rpx;

        .item {
          display: flex;
          padding: 10rpx;
          font-size: 26rpx;
          color: #333;
          border-bottom: 1rpx dashed #ccc;
          .label {
            width: 200rpx;
          }
          .value {
            flex: 1;
          }
        }
      }
      .image {
        width: 100%;
      }
    }
  }

  .similar {
    margin-top: 20rpx;
    // padding-left: 20rpx;
    .title {
      padding: 30rpx 60rpx 30rpx 6rpx;
      padding-left: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      line-height: 1;
      text {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        border-left: 4rpx solid #27ba9b;
        padding-left: 10rpx;
      }
    }

    .content {
      padding: 0 20rpx 20rpx;
      background-color: #f4f4f4;
      display: flex;
      flex-wrap: wrap;

      .goods {
        width: 340rpx;
        padding: 24rpx 20rpx 20rpx;
        margin: 20rpx 7rpx;
        border-radius: 10rpx;
        background-color: #fff;
      }
      .name {
        height: 80rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
      }
      .price {
        line-height: 1;
        font-size: 20rpx;
        color: #cf4444;
      }
      .number {
        font-size: 26rpx;
        margin-left: 2rpx;
      }

      .image {
        width: 300rpx;
        height: 260rpx;
      }
    }
  }
}

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc((var(--window-bottom)));
  z-index: 1;
  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;

  .icons {
    padding-right: 20rpx;
    display: flex;
    align-items: center;
    flex: 1;
    .icons-button {
      flex: 1;
      text-align: center;
      padding: 0;
      margin: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;

      line-height: 1.4;
      &::after {
        border: none;
      }
    }
    text {
      display: block;
      font-size: 34rpx;
    }
  }

  .buttons {
    display: flex;
    & > view {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
    }
    .addcart {
      background-color: #ffa868;
    }
    .payment {
      background-color: #27ba9b;
      margin-left: 20rpx;
    }
  }
}
</style>
